<template>
  <div>
    <vxe-grid v-bind="grid" ref="xGrid" @cell-dblclick="showDetail">
      <template #toolbar_buttons>
        <a-space>
          <a-button type="link" @click="detailClick">
            <a-icon type="eye" />查看
          </a-button>
          <a-button type="link"> <a-icon type="delete" />删除 </a-button>
        </a-space>
      </template>
      <template #toolbar_tools> </template>
      <template #loading>
        <a-spin></a-spin>
      </template>
      <template #empty>
        <eip-empty />
      </template>
      <template #checkboxHeader="{ checked, indeterminate }">
        <span @click.stop="$refs.xGrid.toggleAllCheckboxRow()">
          <a-checkbox :indeterminate="indeterminate" :checked="checked">
          </a-checkbox>
        </span>
      </template>
      <template #checkbox="{ row, checked, indeterminate }">
        <span @click.stop="$refs.xGrid.toggleCheckboxRow(row)">
          <a-checkbox :indeterminate="indeterminate" :checked="checked">
          </a-checkbox>
        </span>
      </template>
    </vxe-grid>
    <operation-detail
      ref="detail"
      v-if="detail.visible"
      :visible.sync="detail.visible"
      :operationLogId="detail.operationLogId"
    ></operation-detail>
  </div>
</template>

<script>
import { query } from "@/services/system/log/operation";
import operationDetail from "./operation-detail";

import { selectTableRow, deleteConfirm } from "@/utils/util";
export default {
  data() {
    return {
      grid: {
        id: "operationlog",
        loading: true,
        height: this.eipTableHeight(),
        sortConfig: {
          trigger: "cell",
          defaultSort: { field: "createTime", order: "desc" },
          orders: ["desc", "asc", null],
          remote: true,
          multiple: true,
          chronological: true,
        },
        pagerConfig: {},
        printConfig: {},
        exportConfig: {},
        filterConfig: {
          remote: true,
        },
        toolbarConfig: {
          slots: {
            buttons: "toolbar_buttons",
            tools: "toolbar_tools",
          },
        },
        columns: [
          {
            type: "checkbox",
            width: 50,
            slots: {
              checkbox: "checkbox",
              header: "checkboxHeader",
            },
            fixed: "left",
            align: "center",
          },
          { type: "seq", width: 60, fixed: "left" },
          {
            field: "createTime",
            title: "操作时间",
            width: 150,
            sortable: true,
            filterRender: { name: "MLFilterRender" },
            filters: [
              {
                data: {
                  type: "datetime",
                  op: "cn",
                  write: null,
                  min: null,
                  max: null,
                },
              },
            ],
          },

          {
            field: "createUserCode",
            title: "登录名",
            width: 120,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "createUserName",
            title: "名称",
            width: 120,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "remark",
            title: "描述",
            width: 150,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "url",
            title: "地址",
            width: 150,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },

          {
            field: "actionExecutionTime",
            title: "方法时间",
            width: 120,
            sortable: true,
            filterRender: { name: "MLFilterRender" },
            filters: [
              {
                data: {
                  type: "number",
                  op: "cn",
                  write: null,
                  min: null,
                  max: null,
                },
              },
            ],
          },
          {
            field: "resultExecutionTime",
            title: "页面展示时间",
            width: 160,
            sortable: true,
            filterRender: { name: "MLFilterRender" },
            filters: [
              {
                data: {
                  type: "number",
                  op: "cn",
                  write: null,
                  min: null,
                  max: null,
                },
              },
            ],
          },
          {
            field: "responseStatus",
            title: "响应状态",
            width: 120,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "requestType",
            title: "请求类型",
            width: 150,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "switch",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [
                    {
                      value: "POST",
                      label: "POST",
                      checked: false,
                      color: "red",
                    },
                    {
                      value: "GET",
                      label: "GET",
                      checked: false,
                      color: "#1890ff",
                    },
                    {
                      value: "DELETE",
                      label: "DELETE",
                      checked: false,
                      color: "#1890ff",
                    },
                    {
                      value: "PUT",
                      label: "PUT",
                      checked: false,
                      color: "#1890ff",
                    },
                  ],
                },
              },
            ],
          },
          {
            field: "controllerName",
            title: "控制器",
            width: 150,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "actionName",
            title: "方法",
            width: 150,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "remoteIp",
            title: "客户端IP",
            width: 120,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "remoteIpAddress",
            title: "归属地址",
            width: 120,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "userAgent",
            title: "浏览器代理",
            width: 160,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "osInfo",
            title: "操作系统",
            width: 120,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "browser",
            title: "浏览器",
            width: 150,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
        ],

        proxyConfig: {
          seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
          sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
          filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
          props: {
            result: "data", // 配置响应结果列表字段
            total: "total", // 配置响应结果总页数字段
          },
          ajax: {
            query: ({ page, sorts, filters }) => {
              return new Promise((resolve) => {
                const firstSort = sorts[0];
                query({
                  filters: this.eipTableFilter(filters),
                  current: page.currentPage,
                  size: page.pageSize,
                  sort: this.eipGridSort(sorts),
                }).then((result) => {
                  if (result.code == this.eipResultCode.success) {
                    resolve(result);
                  }

                  this.grid.loading = false;
                });
              });
            },
          },
        },
      },
      detail: {
        operationLogId: "",
        visible: false,
      },
    };
  },
  components: { operationDetail },
  methods: {
    //初始化列表数据
    tableInit() {
      this.$refs.xGrid.commitProxy("query");
    },

    //详情
    showDetail({
      row,
      rowIndex,
      $rowIndex,
      column,
      columnIndex,
      $columnIndex,
      $event,
    }) {
      this.detail.operationLogId = row.operationLogId;
      this.detail.visible = true;
    },

    /**
     * 修改
     */
    detailClick() {
      let that = this;
      selectTableRow(
        that.$refs.table,
        function (row) {
          that.detail.operationLogId = row.operationLogId;
          that.detail.visible = true;
        },
        that
      );
    },
  },
};
</script>
